<template>
  <div class="jiankong">
    <div class="jiankong_cont">
      <!-- 筛选 -->
      <div class="jiankong_cont_search">
        <div class="dropdown">
          <el-select @change="selectStreet" placeholder="选择街办" v-model="street">
            <el-option :key="item.value" :label="item.label" :value="item.label" v-for="item in options"></el-option>
          </el-select>
        </div>
        <div class="search">
          <el-input placeholder="请输入点位名称" prefix-icon="el-icon-search" v-model="pointName"></el-input>
          <el-button @click="confirm" type="primary">确定</el-button>
        </div>
      </div>
      <!-- 视频 -->
      <div class="monitor" v-if="videoDisplay">
        <ul class="videoUl flex flex-wrap" id="list">
          <li :key="item.siteNumber" @click="videoListClick(item)" class="videoItem" v-for="item in videoList">
            <div class="jynVideo">
              <easy-player :video-url="item.url"></easy-player>
            </div>
            <p class="pointer">{{ item.name }}</p>
          </li>
        </ul>
      </div>
      <div class="videopage flex flex-center">
        <el-pagination :page-count="3" :page-size="pageSize" :total="total" @current-change="pageChange"
          :current-page="pageNo" @size-change="pageChange" layout="total, prev, pager, next, jumper"></el-pagination>
      </div>
    </div>
    <!-- 弹窗 -->
    <div class="jkfix" v-if="showvideo">
      <div class="jkfix1">
        <p @click="showvideo = false" class="fixtitle">
          <span></span>
          <span class="ft">{{ vedioinfo.name }}</span>
          <span class="fclose">X</span>
        </p>
        <div class="fixbox">
          <div :id="vedioinfo.id" class="fixboxvideo"></div>
        </div>
      </div>
    </div>
    <MonitoringPopup ref="videoPopup" @close="closeDetail"></MonitoringPopup>
  </div>
</template>

<script>
import jessibucaPlayer from "./components/jessibuca.vue";
import monitor from "@/components/monitor/index";
import { getViDeviceList, getViDeviceStreet } from "@/api/index.js"; //api
import MonitoringPopup from "@/components/monitoringPopup.vue";
import EasyPlayer from '@easydarwin/easyplayer'
import { VideoListDB } from '@/api'

let plarerArr = [];
export default {
  components: {
    monitor,
    MonitoringPopup,
    jessibucaPlayer,
    EasyPlayer
  },
  data() {
    return {
      imgbg: require("../../assets/images/videoimg.png"),
      monitorUrlFlv: 'https://sprh.aizhangzi.com:3443/mts/hls/H1075261845YFXyyS11O5Z4sHjXjBW/hls.m3u8',
      pointName: "",
      options: [],
      street: "",
      pageNo: 1, //当前也
      pageSize: 4, //每页条数
      total: 0, //视频总数
      videoList: [], //监控列表
      isLastPage: false, //是否最后一页
      showvideo: false, //弹窗
      vedioinfo: {}, //详情
      videoDisplay: true,
      time: null,
      timeSkip: false,
      street: ''
    };
  },
  mounted() {
    // this.getList();
    this.getViDeviceStreet();
    this.timerList();
  },
  methods: {
    //分页
    pageChange(e) {
      this.pageNo = e;
      this.getList();
    },
    // 筛选条件
    confirm() {
      this.getList();
    },
    // 选择街办
    selectStreet(e) {
      console.log(e)
      this.street = e
      this.pageNo = 1;
      this.getList();
    },
    // 街办列表
    getViDeviceStreet() {
      VideoListDB.getVideoStreetDB().then(res => {
        console.log(res, 'VideoListDB')
        const streetList = res.data[0].streetAreaList.map((v, i) => {
          return {
            value: i,
            label: v,
          };
        });
        this.options = [...streetList];
        this.street = this.options[0].label
        this.getList(this.options[0].label);
      })
    },
    //监控列表
    getList() {
      this.videoList = []
      let data = {
        streetArea: this.street,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        deviceName: this.pointName
      };
      if (this.pointName) {
        data.streetArea = ''
      }
      VideoListDB.grtVideoListDB(data)
        .then((res) => {
          console.log(res, 'grtVideoListDB')
          if (res.code == 200) {
            this.total = Number(res.data.total);
            if (this.pageNo * this.pageSize >= this.total) {
              this.timeSkip = true;
            }
            this.$nextTick(() => {
              if (res.data.records.length) {
                res.data.records.forEach((item) => {
                  this.getVideoUrlFn(item)
                })
              }
            });
          }
        })
        .catch((err) => { });
    },

    getVideoUrlFn(item) {
      const data = {
        devicePath: item.path,
        videoQuality: 1,
        disableAudio: true
      }
      VideoListDB.getVideoUrlDB(data).then(res => {
        console.log(res.data)
        this.videoList.push({
          url: res.data,
          name: item.name
        })
      })
    },
    //清除视频
    clearplayer(obj, i) {
      obj.stop();
      obj.hls = null;
      obj.url = "";
      obj.id = null;
    },
    //点击监控弹窗
    videoListClick(item) {
      if (item.type != 2) {
        plarerArr.forEach((item, index) => {
          item.stop();
        });
      }
      this.$refs.videoPopup.open(item);
    },
    closeDetail(data) {
      plarerArr.forEach((item, index) => {
        item.play();
      });
    },

    timerList() {
      this.time = setInterval(() => {
        if (this.timeSkip) {
          this.pageNo = 1;
          this.timeSkip = false;
        } else {
          this.pageNo++;
        }
        this.getList();
      }, 300000);
    },
  },
};
</script>

<style lang="less">
.jiankong {
  width: 100%;
  height: 1020px;
  // background-image: url(../../assets/images/jiankong/jiankongbg.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1001;

  .jiankong_cont {
    // height: calc(100% - 80px);
    // background-image: url(../../assets/images/jiankong/jk-bg.png);
    background-size: 98% 99%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    padding: 0 1%;
    // background: linear-gradient(to bottom, #000217, #17253c);

    .jiankong_cont_search {
      display: flex;
      justify-content: center;

      .dropdown {
        .el-input .el-input__inner {
          width: 150px;
          background: #173c90;
          border: none;
        }
      }

      .search {
        width: 430px;
        margin-left: 20px;
        background: #173c90;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        padding-left: 10px;

        .el-input .el-input__inner {
          width: 320px;
          background: none;
          border: none;
          color: white;
          caret-color: white;
        }

        .el-button {
          width: 100px;
          background: #16cefc;
        }
      }
    }

    .monitor {
      flex: 1;
      overflow: hidden;
      margin-top: 30px;
    }

    .videoUl {
      // margin-top: 15px;

      .videoItem {
        cursor: pointer;
        width: 45%;
        margin-top: 20px;
        margin-right: 1%;
        text-align: center;
        overflow: hidden;
        padding: 28px;
        height: 365px;
        background-image: url(../../assets/images/jiankong/jk-item-bg.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        border: none;
        -webkit-box-shadow: none;
        position: relative;

        .video {
          width: 100%;
          height: 280px;
        }

        .jynPlayers {
          height: 280px;
        }

        p {
          font-size: 16px;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #feffff;
          margin-top: 8px;
        }
      }

      .jynVideo {
        position: relative;
        height: 290px;

        .cover-picture {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          z-index: 1002;

          img {
            display: block;
            width: 100%;
            height: 100%;
          }
        }
      }

      // .videoItem:nth-child(4n + 4) {
      // margin-right: 0;
      // }
    }

    // .el-pagination button:disabled{
    //     background: none;
    //     color: #FFFFFF;
    // }
    .videopage {
      margin: 30px 0;
    }

    .el-pager li {
      background: none;
      color: #ffffff;
    }

    .el-pager li.active {
      color: #409eff !important;
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev {
      background: none;
    }

    .el-pagination__total {
      color: white;
    }

    .el-pagination__jump {
      color: white;
    }

    .el-pagination .btn-next .el-icon,
    .el-pagination .btn-prev .el-icon {
      color: #ffffff;
    }
  }

  // 弹窗
  .jkfix {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;

    .jkfix1 {
      width: 60%;
      height: 70%;
      background-color: #0e3154;
      border-radius: 8px;
      display: flex;
      flex-direction: column;

      .fixtitle {
        height: 60px;
        font-size: 18px;
        padding: 0 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .ft,
        .fclose {
          color: #fff !important;
        }
      }

      .fixbox {
        flex: 1;
        height: 0;

        .fixboxvideo {
          height: 100%;
        }
      }
    }
  }
}
</style>